<template>
    <el-dialog title="添加备注" :visible="visible" width="540px" append-to-body
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="cancel">
        <el-form ref="form" :model="form" :rules="rules" label-position="top">
            <el-form-item label="内容" prop="remarkContent">
                <el-input v-model="form.remarkContent" type="textarea" :rows="6" placeholder="请输入备注内容"/>
            </el-form-item>
            <el-form-item label="次品数" prop="remarkCps">
                <el-input v-model="form.remarkCps" size="small" placeholder="请输入次品数"/>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="cancel">取 消</el-button>
            <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>

</template>

<script>
import {handleEnum, responseEnum} from "../../../../const/const";
import {addRemark, updateRemark} from "../api";
import {IS_INTEGER} from "../../../../utils/validate";
import Api from "../api";

export default {
     name: 'addRemark',
    props: ['data', 'visible', 'taskId','type'],
    data() {
        return {
            form: {
                remarkContent: null,  // 备注内容
                remarkCps: null, // 次品数
                taskId: this.taskId
            },
            // 校验
            rules: {
                remarkContent: [{required: true, message: '请输入备注内容'}],
                remarkCps: [
                    {required: true, message: '请输入次品数'},
                    {required: true, pattern: IS_INTEGER, message: '请输入正整数'}
                ],
            },
        }
    },
    mounted() {
        if(this.type === handleEnum.edit) {
            this.form = this.data;
        }
    },
    methods: {
        /**
         * 提交表单
         */
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    const loading = this.$loading({lock: true});

                    const apiName = this.type === handleEnum.add ? 'addRemark' : 'updateRemark';
                    Api[apiName](this.form).then(res => {
                        if (res.code === responseEnum.success) {
                            this.$message.success('添加成功');
                            this.$emit('update:visible', false);
                            this.$emit('success');
                        } else {
                            this.$message.error(res.msg);
                        }
                    }).finally(() => loading.close())
                }
            })
        },
        /*取消、关闭*/
        cancel() {
            this.$emit('update:visible')
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
